{% extends "base.html" %}
{% block content %}
<div class="max-w-7xl mx-auto p-6 grid grid-cols-1 md:grid-cols-12 gap-6">
  <!-- 左侧：题目信息区 -->
  <div class="md:col-span-5 bg-white rounded-xl shadow-lg p-6 space-y-6">
    <!-- 题目基本信息（含"再次尝试"按钮） -->
    <div>
      <div class="flex flex-wrap items-center justify-between mb-4">
        <h2 class="text-xl font-bold text-gray-900">{{ problem.title }}</h2>
        <a href="{{ url_for('problem_detail', problem_id=problem.id) }}" 
           class="mt-2 sm:mt-0 inline-flex items-center gap-2 px-5 py-2 bg-blue-500 text-white rounded-lg 
                  hover:bg-blue-600 transition-all duration-300">
          <i class="fa fa-refresh"></i>
          <span>再次尝试</span>
        </a>
      </div>
      
      <div class="flex items-center space-x-2">
        <span class="text-gray-600">难度：</span>
        <span 
          class="px-2 py-1 text-xs font-medium rounded 
                 {% if problem.difficulty == '简单' %}bg-green-100 text-green-800
                 {% elif problem.difficulty == '中等' %}bg-yellow-100 text-yellow-800
                 {% else %}bg-red-100 text-red-800{% endif %}"
        >
          {{ problem.difficulty }}
        </span>
      </div>
      <p class="text-gray-600 mt-3">
        {{ problem.description|truncate(180) }}
      </p>
    </div>
    
    <!-- 提交信息 -->
    <div class="bg-gray-50 p-4 rounded-lg space-y-3">
      <h3 class="text-lg font-semibold text-gray-900 border-b pb-2">提交信息</h3>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <span class="text-gray-500 text-sm">提交时间：</span>
          <span class="text-gray-800">{{ submission.timestamp.strftime('%Y-%m-%d %H:%M') }}</span>
        </div>
        <div>
          <span class="text-gray-500 text-sm">状态：</span>
          <span class="font-medium 
                       {% if submission.status == 'accepted' %}text-green-600
                       {% else %}text-red-600{% endif %}">
            {{ submission.status|title }}
          </span>
        </div>
        <div>
          <span class="text-gray-500 text-sm">执行时间：</span>
          <span class="text-gray-800">{{ "%.3f"|format(submission.execution_time) }} 秒</span>
        </div>
        <div>
          <span class="text-gray-500 text-sm">语言：</span>
          <span class="text-gray-800">{{ submission.language }}</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 右侧：代码展示区（核心修复） -->
  <div class="md:col-span-7 bg-white rounded-xl shadow-lg p-6 space-y-4">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-2xl font-bold text-gray-900">提交的代码</h2>
      <span class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-full">
        {{ submission.language }}
      </span>
    </div>
    
    <!-- 代码展示容器（动态渲染，确保尖括号显示） -->
    <div class="relative">
      <pre class="bg-gray-50 border border-gray-200 rounded-lg p-4 
                  max-h-96 overflow-y-auto overflow-x-auto 
                  font-mono text-sm leading-relaxed" id="code-display">
        <!-- 动态插入代码，避免HTML解析干扰 -->
      </pre>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 1. 安全获取代码（通过tojson避免JS注入）
const rawCode = {{ submission.code|tojson }};
const lang = {{ submission.language|tojson }};

// 2. 动态创建代码元素（用textContent确保原始字符显示）
const createCodeElement = () => {
  const codeEl = document.createElement('code');
  codeEl.className = `language-${lang.toLowerCase().replace('c++', 'cpp')}`;
  codeEl.textContent = rawCode; // 关键：textContent不解析HTML，<和>必显
  return codeEl;
};

// 3. 加载Prism语法高亮（仅当需要时）
const loadPrism = (codeEl) => {
  // 加载Prism CSS
  const prismCss = document.createElement('link');
  prismCss.rel = 'stylesheet';
  prismCss.href = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css';
  document.head.appendChild(prismCss);
  
  // 加载Prism核心JS
  const prismJs = document.createElement('script');
  prismJs.src = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js';
  prismJs.onload = () => {
    // 加载对应语言的Prism组件（C++特殊处理）
    const langComponent = lang.toLowerCase() === 'c++' 
      ? 'prism-cpp.min.js' 
      : `prism-${lang.toLowerCase()}.min.js`;
    
    const componentJs = document.createElement('script');
    componentJs.src = `https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/${langComponent}`;
    componentJs.onload = () => {
      // 强制高亮
      Prism.highlightElement(codeEl);
    };
    document.body.appendChild(componentJs);
  };
  document.body.appendChild(prismJs);
};

// 4. 初始化代码显示
document.addEventListener('DOMContentLoaded', () => {
  const codeDisplay = document.getElementById('code-display');
  const codeEl = createCodeElement();
  
  // 先插入纯文本代码（确保显示）
  codeDisplay.appendChild(codeEl);
  
  // 尝试加载Prism高亮（兼容其他语言）
  try {
    loadPrism(codeEl);
  } catch (e) {
    console.warn('Prism加载失败， fallback到纯文本:', e);
  }
});
</script>

<!-- 滚动条美化 -->
<style>
pre::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
pre::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
pre::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}
pre::-webkit-scrollbar-track {
  background-color: #f3f4f6;
}
</style>
{% endblock %}